<template>
  <div class="flex p-3 h-full w-full">
    <v-card class="ms-4" style="border-right: 0">
      <v-navigation-drawer width="280" permanent>
        <v-list>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="text-h6 flex items-center">
                <span style="margin: 19px 0">{{ orgName }}</span>

                <v-dialog v-model="createOrgVisible" max-width="600px">
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                      class="me-1 ms-auto"
                      v-bind="attrs"
                      v-on="on"
                      x-small
                      fab
                      color="primary"
                    >
                      <v-icon dark>mdi-plus</v-icon>
                    </v-btn>
                  </template>
                  <v-card class="p-4">
                    <v-form ref="orgFormComponent">
                      <v-text-field
                        v-model="createOrgForm.name"
                        label="分类名称"
                        :rules="createOrgRules"
                      ></v-text-field>

                      <!-- <v-text-field
                        v-model="createOrgForm.desc"
                        label="项目简介"
                        required
                      ></v-text-field> -->

                      <v-btn @click="onCreateOrg" color="primary" class="mr-4">
                        创建
                      </v-btn>
                    </v-form>
                  </v-card>
                </v-dialog>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list dense>
          <v-list-item-group
            @change="onSelectOrgChange"
            v-model="selectOrgActive"
            :mandatory="true"
            color="primary"
          >
            <v-list-item v-for="(item, i) in orgList" :key="i" :value="i">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title>{{ item.name }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </v-card>
    <v-card class="ms-4 flex-auto flex flex-col overflow-auto">
      <v-tabs class="shrink-0" v-model="tabActive">
        <v-tab>接口文档</v-tab>
        <v-tab>待办事项</v-tab>
        <v-tab>日历</v-tab>
      </v-tabs>
      <project-menu v-if="tabActive === 0" :org-name="orgName" :org-id="selectOrgId" />
      <task-menu v-if="tabActive === 1" :org-name="orgName" :org-id="selectOrgId" />
      <!-- <summary-menu v-if="tabActive === 2" :org-name="orgName" :org-id="selectOrgId" /> -->
       <calendar-menu v-if="tabActive === 2" :org-name="orgName" :org-id="selectOrgId" />
    </v-card>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "@vue/composition-api";

import { useApiStore } from "@/store/api";
import { getOrgList, createOrg } from "@/api/org";
import projectMenu from './children/project/index.vue'
import taskMenu from './children/task/index.vue'
import calendarMenu from './children/calendar/index.vue'

export default defineComponent({
  name: 'index',
  components: {
    projectMenu,
    taskMenu,
    calendarMenu,
  },
  setup() {
    const tabActive = ref(0)
    const apiStore = useApiStore();
    apiStore.projectId = apiStore.projectName = "";
    const orgName = ref("");
    const selectOrgActive = ref(0);
    const selectOrgId = ref(null);
    function onSelectOrgChange(index) {
      orgName.value = orgList.value[index].name;
      selectOrgId.value = orgList.value[index].id;
      orgName.value = orgList.value[index].name;
    }
    const orgList = ref([]);
    function fetchOrgList() {
      getOrgList({
        page: 1,
        pageSize: 10000,
      }).then((res) => {
        const data = res.data;
        orgList.value = data.list.map((item) => ({
          ...item,
          icon: "mdi-folder",
        }));
        selectOrgId.value = orgList.value[0].id;
        orgName.value = orgList.value[0].name;
      });
    }
    fetchOrgList();

    const createOrgVisible = ref(false);
    const orgFormComponent = ref(null);
    const createOrgForm = reactive({
      name: "",
    });
    const createOrgRules = [(v) => !!v || "Name is required"];
    function onCreateOrg() {
      if (orgFormComponent.value.validate()) {
        createOrg(createOrgForm).then(() => {
          fetchOrgList();
          createOrgVisible.value = false;
          orgFormComponent.value.reset();
        });
      }
    }

    


    return {
      orgName,
      selectOrgActive,
      selectOrgId,
      orgList,
      createOrgVisible,
      orgFormComponent,
      createOrgForm,
      onCreateOrg,
      createOrgRules,

      onSelectOrgChange,
      tabActive,
    };
  },
})
</script>

<style scoped>
</style>